<template>
  <view>
    <tn-grid :col="col" :align="'left'" >
      <tn-grid-item
          v-for="(item,index) in iconList"
          :key="index"
          @click="tn(item.url)"
      >
        <view class="tn-margin-sm">
          <!-- 用户中心的icon-->
          <view v-if="col==3">
            <view class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
              <image style="width: 25px;height: 20px;" :src="item.icon"></image>
              <view class="tn-flex tn-flex-center tn-text-sm tn-color-gray--dark tn-margin-top-xs">{{item.name}}</view>
            </view>
          </view>

          <!-- 首页的icon-->
          <view v-if="col==4">
            <view  class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
              <image style="width: 130rpx;height: 100rpx;" :src="item.icon"></image>
              <view class="tn-flex tn-flex-center tn-color-gray--dark tn-margin-top-xs">{{item.name}}</view>
            </view>
          </view>
        </view>
      </tn-grid-item>
    </tn-grid>
  </view>
</template>

<script>
  import common_mixin from '@/libs/mixin/common_mixin.js'
  import UButton from "../../uni_modules/uview-ui/components/u-button/u-button.vue";

	export default {
    components: {UButton},
    mixins: [common_mixin],
		name: "iconList",
		data() {
			return {};
		},
		props: ['iconList','col'],
		methods: {
		}
	}
</script>

<style lang="scss">
.tn-grid-item{
  background: none;
}
</style>
